<template>
  <view class="page">

    <!-- 背景 -->
    <image class="page-bg" mode="widthFix" :src="imageUrl +'list/g-bg.jpg'"></image>

    <!-- 头部 -->
    <u-sticky offset-top="0" :bgColor="bgColor">
      <u-navbar leftText="预约详情" title=" " @rightClick="rightClick" :autoBack="true" placeholder
                :safeAreaInsetTop="true" :bgColor="bgColor"></u-navbar>
    </u-sticky>

    <!-- 主内容 -->
    <view class="page-content">
      <view class="wp">
        <view class="box-hg3 v2">
          <image class="bg" mode="widthFix" :src="imageUrl +'hg-bg4.png'"></image>
          <image class="car" mode="widthFix" :src="imageUrl +'hg-car1.png'"></image>
          <view class="top">
            <view class="t2">{{ item.plate }}</view>
            <image class="icon" mode="widthFix" :src="imageUrl +'hg-rz1.png'" v-if="false"></image>
          </view>
          <view class="cont">
            <view class="t1">预约信息</view>
            <view class="t2">
              <view class="t2-item">
                <view class="t2-l">停车场</view>
                <view class="t2-r">
                  {{ item.parkInfo.name }}
                  <image class="icon" mode="widthFix" :src="imageUrl +'hg-addr2.png'" v-if="false"></image>
                </view>
              </view>
              <view class="t2-item">
                <view class="t2-l">入场时间</view>
                <view class="t2-r">{{ item.start }}</view>
              </view>
              <view class="t2-item">
                <view class="t2-l">出场时间</view>
                <view class="t2-r">{{ item.end }}</view>
              </view>
              <view class="t2-item" v-if="false">
                <view class="t2-l">手机号</view>
                <view class="t2-r">18888888888</view>
              </view>
            </view>
            <view class="total" v-if="false">
              总额
              <view class="price">￥
                <view class="num">40.00</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部 -->
    <view class="fot-hg2">
      <view class="wp">
        <view class="left"></view>
        <view class="right" v-if="false">
          <view class="a2" @click="popShow1=true">取消</view>
        </view>
      </view>
    </view>

    <!-- 弹窗 -->
    <u-popup
        :show="popShow1"
        mode="center"
        bgColor="transparent"
        closeable
        @close="popShow1=false"
    >
      <view class="popWin-hg2">
        <image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg6.png'"></image>
        <view class="tit">取消预约</view>
        <view class="desc">预约取消后费用会原路退还</view>
        <view class="cont">
          <view class="t1">预约信息</view>
          <view class="t2">
            <view class="t2-item v2">
              <view class="t2-l">车牌号</view>
              <view class="t2-r">鄂E·E12345</view>
            </view>
            <view class="t2-item">
              <view class="t2-l">停车场</view>
              <view class="t2-r">
                夷陵市属公园-1号停车场
                <image class="icon" mode="widthFix" :src="imageUrl +'hg-addr2.png'"></image>
              </view>
            </view>
            <view class="t2-item">
              <view class="t2-l">入场时间</view>
              <view class="t2-r">2025-09-03 15:30</view>
            </view>
            <view class="t2-item">
              <view class="t2-l">出场时间</view>
              <view class="t2-r">2025-09-03 17:30</view>
            </view>
            <view class="t2-item">
              <view class="t2-l">手机号</view>
              <view class="t2-r">18888888888</view>
            </view>
          </view>
          <view class="total">
            总额
            <view class="price">￥
              <view class="num">40.00</view>
            </view>
          </view>
        </view>
        <view class="btns">
          <view class="item a1" @click="popShow1=false" v-if="false">取消</view>
          <view class="item a2" @click="popShow1=false, popShow2=true" v-if="false">确认</view>
        </view>
      </view>
    </u-popup>
    <u-popup
        :show="popShow2"
        mode="center"
        bgColor="transparent"
        closeable
        @close="popShow2=false"
    >
      <view class="popWin-hg2">
        <image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg2.png'"></image>
        <image class="state-icon" mode="widthFix" :src="imageUrl + 'hg-success1.png'"></image>
        <view class="tit">取消成功</view>
        <view class="desc">您已成功取消该预约</view>
        <view class="btns">
          <view class="item a1" @click="go('/pages/parkingReservationState1/parkingReservationState1')">返回预约首页
          </view>
        </view>
      </view>
    </u-popup>

  </view>

</template>

<script>
export default {
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',

      // 取消预约弹窗
      popShow1: false,

      // 取消成功弹窗
      popShow2: false,

      item: {},
    }
  },
  onLoad(options) {
    this.item = JSON.parse(decodeURIComponent(options.item));
    console.log(this.item);
  },
  methods: {
    // 头部滚动
    onPageScroll(res) {
      if (res.scrollTop >= 60) {
        this.bgColor = '#ffffff'
      } else {
        this.bgColor = 'transparent'
      }
    },
    go(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss">
page {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 128rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 128rpx);
}

.page {
  min-height: calc(100vh - env(safe-area-inset-bottom) - 128rpx);
}
</style>
